<template>
  <div class="score-management-list">
    <h2>成绩管理</h2>
    <div class="matches-table">
      <el-table :data="matches" border style="width: 100%" v-loading="loading">
        <el-table-column prop="match_date" label="比赛日期" width="120">
          <template #default="scope">
            {{ formatDate(scope.row.match_date) }}
          </template>
        </el-table-column>
        <el-table-column prop="match_time" label="比赛时间" width="100" />
        <el-table-column prop="venue_name" label="比赛场地" width="150" />
        <el-table-column label="主场学校" width="180">
          <template #default="scope">
            <div class="school-info">
              <span>{{ scope.row.home_school_name }}</span>
              <small v-if="scope.row.home_grade_level_name">
                ({{ scope.row.home_grade_level_name }} {{ scope.row.home_group_code }})
              </small>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="客场学校" width="180">
          <template #default="scope">
            <div class="school-info">
              <span>{{ scope.row.away_school_name }}</span>
              <small v-if="scope.row.away_grade_level_name">
                ({{ scope.row.away_grade_level_name }} {{ scope.row.away_group_code }})
              </small>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button 
              type="primary" 
              size="small" 
              @click="goToScoreManagement(scope.row.id)"
            >
              管理成绩
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'

// 确保axios有正确的baseURL配置
axios.defaults.baseURL = 'http://localhost:3000'

const router = useRouter()
const matches = ref([])
const loading = ref(false)

// 获取所有比赛
const fetchMatches = async () => {
  loading.value = true
  try {
    console.log('获取比赛列表')
    const response = await axios.get('/api/matches')
    console.log('获取到的比赛列表:', response.data)
    matches.value = response.data
  } catch (error) {
    console.error('获取比赛列表失败:', error)
    ElMessage.error('获取比赛列表失败')
  } finally {
    loading.value = false
  }
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 获取状态类型
const getStatusType = (status) => {
  switch (status) {
    case 'completed':
      return 'success'
    case 'in_progress':
      return 'warning'
    case 'pending':
      return 'info'
    case 'cancelled':
      return 'danger'
    default:
      return 'info'
  }
}

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'completed':
      return '已完成'
    case 'in_progress':
      return '进行中'
    case 'pending':
      return '未开始'
    case 'cancelled':
      return '已取消'
    default:
      return '未知'
  }
}

// 进入成绩管理页面
const goToScoreManagement = (matchId) => {
  router.push(`/admin/match/${matchId}/score`)
}

onMounted(async () => {
  await fetchMatches()
})
</script>

<style scoped>
.score-management-list {
  padding: 20px;
}

.matches-table {
  margin-top: 20px;
}

.school-info {
  display: flex;
  flex-direction: column;
}

.school-info small {
  color: #909399;
  font-size: 12px;
}
</style> 